<template>
  <view class="navBar">
    <view class="navList">
      <view
        v-for="(item, index) in navList"
        :key="index"
        @click="onClickItem(index)"
        :class="{ active: current === index }"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// Define props
const props = defineProps({
  navList: {
    type: Array,
    default: () => [],
  },
  current: {
    type: Number,
    default: 0,
  },
})

// 当前选中项
const current = ref(props.current)

onShow(() => {
  current.value = 0
})

// Define emits
const emit = defineEmits(['change'])

// Handle click
const onClickItem = (index: number) => {
  if (current.value !== index) {
    current.value = index
    emit('change', index)
  }
}

// Watch for changes in the current prop
watch(
  () => props.current,
  (newVal) => {
    current.value = newVal
  },
)
</script>

<style lang="scss" scoped>
.navBar {
  position: relative;

  .navList {
    display: flex;
    justify-items: start;
    height: 90rpx;
    align-content: end;

    view {
      margin-left: 30rpx;
      text-align: center;
      line-height: 88rpx;
      font-size: 32rpx;
      color: #333333;
    }

    .active {
      position: relative;
      font-weight: 700;
      font-size: 50rpx;
      transition: all 0.3s;
    }

    .active::after {
      content: '';
      width: 40rpx;
      height: 10rpx;
      background-color: #ea6389;
      border-radius: 3rem;
      position: absolute;
      left: calc(50% - 20rpx);
      bottom: 6rpx;
    }
  }
}
</style>
